<template>
  <view class="nanny-item">
    <!-- 中间信息 -->
    <view class="info">
      <view class="name-age">
        <text class="name">{{
          isNotice ? row.appointmentPersonName : row.talentName
        }}</text>
        <text class="gender" v-if="isNotice">{{ row.appointmentPhone }}</text>
      </view>
      <view class="work-scope">
        预约时间：{{ fmtTime(row.appointmentStartTime) }}至{{
          fmtTime(row.appointmentEndTime)
        }}
      </view>
      <view class="work-scope" v-if="row.note">
        备注：{{ row.note }}
      </view>
      <view
        class="work-scope"
        style="justify-content: space-between; display: flex"
      >
        <div style="display: flex; align-items: center; gap: 6px">
          <span>预约状态</span>
          <van-tag
            size="medium"
            :type="mapStatus[row.appointmentStatus].color"
            round
          >
            {{ mapStatus[row.appointmentStatus].label }}
          </van-tag>
        </div>
        <div>
          <!-- <van-button
            v-if="row.appointmentStatus === '0' && isNotice"
            size="small"
            type="primary"
            round
            @click="submit('1')"
            >同意</van-button
          >
          <van-button
            v-if="row.appointmentStatus === '0' && isNotice"
            size="small"
            round
            @click="submit('2')"
            style="margin-left: 10px"
            >拒绝</van-button
          > -->
          <van-button
            v-if="row.appointmentStatus === '1' && isNotice"
            size="small"
            type="primary"
            round
            @click="submit('3')"
            >已处理</van-button
          >
        </div>
      </view>
    </view>

    <van-dialog
      v-model="show"
      title="提示"
      show-cancel-button
      @close="closeDialog"
      @confirm="confirmHandler"
    >
      <van-field
        v-model="message"
        rows="4"
        autosize
        type="textarea"
        placeholder="请输入备注"
      />
    </van-dialog>
  </view>
</template>

<script>
import { approvalAppointment } from '../../../api/flow'
import moment from 'moment'
import { Dialog } from 'vant'
import { mapGetters } from 'vuex'

export default {
  name: 'MakeCard',
  data() {
    return {
      show: false,
      message: '',
      type: 0,
      mapStatus: {
        0: { label: '待审批', color: 'primary' },
        1: { label: '已同意', color: 'success' },
        2: { label: '已拒绝', color: 'danger' },
        3: { label: '已处理', color: 'primary' },
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  props: {
    row: {
      type: Object,
      default: () => ({}),
    },
    isNotice: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    fmtTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm')
    },
    closeDialog() {
      this.show = false
      this.message = ''
    },
    confirmHandler() {
      const { indexCode } = this.row
      approvalAppointment({
        approvalContent: this.message,
        appointmentIndexCode: indexCode,
        approvalResult: this.type, //1 通过 2 未通过
        userId: this.userInfo.userId,
      })
      this.$emit('approval', this.type)
    },
    submit(approvalResult) {
      if (approvalResult == '3') {
        const { indexCode } = this.row
        Dialog.confirm({
          title: '提示',
          message:
            '请确保当前工单已处理完成并且甲方验收合格，如产生纠纷，后果自负！！！',
        })
          .then(() => {
            approvalAppointment({
              appointmentIndexCode: indexCode,
              approvalResult, //3 已处理
            }).then((res) => {
              this.$emit('approval', approvalResult)
            })
          })
          .catch(() => {})
      } else {
        this.type = approvalResult
        this.show = true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.nanny-item {
  position: relative;
  display: flex;
  padding: 8px;
  background-color: $uni-color-success;
  border-radius: 8px;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  // 头像样式
  .avatar {
    width: 80px;
    height: 100px;
    border-radius: 8px;
    margin-right: 16px;
  }

  // 中间信息区域
  .info {
    flex: 1;

    .name-age {
      margin-bottom: 8px;

      .name {
        font-size: 16px;
        font-weight: bold;
        color: $uni-color-primary;
        margin-right: 8px;
      }

      .gender {
        font-size: 14px;
        color: #333333;
        margin-right: 10px;
        position: relative;
        //&:after{
        //  position: absolute;
        //  top: 50%;
        //  transform: translateY(-50%);
        //  right:-6px;
        //  width: 1px;
        //  height: 80%;
        //  background: #333333;
        //  content: '';
        //  color: #333333;
        //  font-weight: bold;
        //}
      }

      .age {
        font-size: 14px;
        color: #333333;
      }
    }

    .work-scope {
      font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 限制行数为3 */
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 6px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .points {
    font-size: 14px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 0 8px 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    background: #66c2ff;
    color: #f8e4a7;
  }

  .right {
    float: right;
    margin-top: 10px;
  }
}
</style>
